<template>
	<view class="nomal_tab d_f_sarwc wa bg_f">
		<view
		  class="tab_item"
		  :class="tabInd == index ? 'tab_active' : ''"
		  v-for="(item,index) in tabList"
		  :key="item"
		  @click="changeTab(index)"
		>
			<view class="">{{item}}</view>
			<view class="tab_lien m0_a" v-if="tabInd == index"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'tabs',
		props: ["tabList"],
		data() {
			return {
				tabInd: 0,
			};
		},
		methods: {
			// tab切换
			changeTab(ind) {
				if (this.tabInd != ind) {
					this.tabInd = ind;
					this.$emit("changeTabs",ind)
				}
			},
		}
	}
</script>
<style>
	.nomal_tab{
		height: 82rpx;
	}
	/*tab 样式*/
	.nomal_tab .tab_item{
		margin-top: 10rpx;
		font-size: 30rpx;
		line-height: 62rpx;
		color: #768091;
	}
	.nomal_tab .tab_active{
		color: #081234;
	}
	.nomal_tab .tab_lien{
		width: 32rpx;
		height: 6rpx;
		background-color: #0079fe;	
	}
</style>